// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { Button, GroupBox, SpinBox, ComboBox, CheckBox, LineEdit, TabWidget, VerticalBox, HorizontalBox,
    Slider, ProgressIndicator, SpinBox, Switch } from "std-widgets.slint";
import { GallerySettings } from "../gallery_settings.slint";
import { Page } from "page.slint";

export component ControlsPage inherits Page {
    title: @tr("Controls");
    description: @tr("This page gives an overview of the default widget set provided by Slint. The widgets are available in different styles native, fluent-(dark/light) and material-(dark/light). The widgets can be imported from \"std-widgets.slint\".");

    GroupBox {
        vertical-stretch: 0;
        title: @tr("Buttons");

        HorizontalBox {
            alignment: start;
            padding: 0px;

            Button {
                text: @tr("Regular Button");
                enabled: GallerySettings.widgets-enabled;
            }

            Button {
                text: @tr("Primary Button with Icon");
                icon: @image-url("../../thumbsup.png");
                enabled: GallerySettings.widgets-enabled;
                primary: true;
            }

            Button {
                checkable: true;
                text: self.checked ? @tr("ON") : @tr("OFF");
                enabled: GallerySettings.widgets-enabled;
            }
        }
    }

    GroupBox {
        title: @tr("CheckBox - SpinBox - ComboBox - Switch");
        vertical-stretch: 0;

        HorizontalBox {
            alignment: start;
            padding: 0px;

            checkbox := CheckBox {
                text: checkbox.checked ? @tr("(checked)") : @tr("(unchecked)");
                checked: true;
                enabled: GallerySettings.widgets-enabled;
            }

            SpinBox {
                vertical-stretch: 0;
                value: 42;
                enabled: GallerySettings.widgets-enabled;
            }

            ComboBox {
                model: [@tr("Select Something"), @tr("From this"), @tr("Combobox")];
                enabled: GallerySettings.widgets-enabled;
            }

            Switch {
                text: @tr("Flight Mode");
                checked: true;
                enabled: GallerySettings.widgets-enabled;
            }
        }
    }

    GroupBox {
        title: @tr("LineEdit");
        vertical-stretch: 0;

        LineEdit {
            placeholder-text: @tr("Enter some text");
            enabled: GallerySettings.widgets-enabled;
        }
    }

    GroupBox {
        title: @tr("Slider");
        vertical-stretch: 0;

        i-slider := Slider {
            min-width: 160px;
            minimum: -100;
            maximum: 100;
            value: 42;
            enabled: GallerySettings.widgets-enabled;
        }
    }

    GroupBox {
        title: @tr("ProgressIndicator");
        vertical-stretch: 0;

        VerticalLayout {
            spacing: 16px;

            i-progress-indicator := ProgressIndicator {
                min-width: 160px;
                minimum: i-slider.minimum;
                maximum: i-slider.maximum;
                progress: i-slider.value;
                indeterminate: true;
            }

            CheckBox {
                text: @tr("indeterminate");
                checked <=> i-progress-indicator.indeterminate;
            }
        }
    }

    GroupBox {
        title: @tr("TabWidget");

        TabWidget {
            Tab {
                title: @tr("Tab 1");

                VerticalBox {
                    alignment: start;

                    GroupBox {
                        title: @tr("Content of tab 1");

                        HorizontalBox {
                            alignment: start;

                            Button {
                                text: @tr("Click me");
                                enabled: GallerySettings.widgets-enabled;
                            }
                        }
                    }
                }
            }

            Tab {
                title: @tr("Tab 2");

                VerticalBox {
                    alignment: start;

                    GroupBox {
                        title: @tr("Content of tab 2");

                        VerticalBox {
                            alignment: start;

                            CheckBox {
                                text: @tr("Check me");
                                enabled: GallerySettings.widgets-enabled;
                            }
                        }
                    }
                }
            }

            Tab {
                title: @tr("Tab 3");

                VerticalBox {
                    Text {
                        text: @tr("Content of tab 3");
                    }
                }
            }
        }
    }
}
